<!DOCTYPE html>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.css" />
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var paginationApp = angular.module("paginationApp", []);
			paginationApp.controller("paginationCtrl", ["$scope", "$http", function($scope, $http) {
				
				$scope.currentPage = 1;
				$scope.pageSize = 2;
				$scope.totalCount = 0;
				$scope.totalPages = 0;

				$scope.prev = function() {
					if($scope.currentPage > 1) {
						$scope.selectPage($scope.currentPage - 1);
					}
				}

				$scope.next = function() {
					if($scope.currentPage < $scope.totalPages) {
						$scope.selectPage($scope.currentPage + 1);
					}
				}

				$scope.selectPage = function(page) {
					// 如果页码超出范围
					if($scope.totalPages != 0) {
						if(page < 1 || page > $scope.totalPages) return;
					}

					$http({
						method: 'GET',
						url: './6_' + page + '.json',
						params: {
							"page": page,
							"pageSize": $scope.pageSize
						}
					}).success(function(data, status, headers, config) {
						// 显示表格数据 
						$scope.products = data.products;
						// 计算总页数
						$scope.totalCount = data.totalCount;
						$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);

						// 当前显示页，设为当前页
						$scope.currentPage = page;

						// 固定显示10页 (前5后4)
						var begin;
						var end;

						begin = page - 5;
						if(begin < 0) {
							begin = 1;
						}

						end = begin + 9;
						if(end > $scope.totalPages) {
							end = $scope.totalPages;
						}

						begin = end - 9;
						if(begin < 1) {
							begin = 1;
						}

						$scope.pageList = new Array();
						for(var i = begin; i <= end; i++) {
							$scope.pageList.push(i);
						}

					}).error(function(data, status, headers, config) {
						// 当响应以错误状态返回时调用
						alert("出错，请联系管理员 ");
					});
				}

				$scope.isActivePage = function(page) {
					return page == $scope.currentPage;
				}

				// 发起请求 显示第一页数据 
				$scope.selectPage($scope.currentPage);

			}]);
		</script>
	</head>

	<body ng-app="paginationApp" ng-controller="paginationCtrl">
		<table class="table table-bordered table-hover">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href="" ng-click='prev()'>上一页</a>
				</li>
				<li ng-repeat="page in pageList">
					<a href="" ng-click="selectPage(page)">{{page}}</a>
				</li>
				<li>
					<a href="" ng-click='next()'>下一页</a>
				</li>
			</ul>
		</div>

	</body>

</html>